<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>点击文字弹出一个DIV层窗口代码</title>
  <style>
    .black_overlay {
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 1001;
      -moz-opacity: 0.8;
      opacity: .80;
      filter: alpha(opacity=88);
    }

    .white_content {
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 55%;
      height: 55%;
      padding: 20px;
      border: 10px solid orange;
      background-color: white;
      z-index: 1002;
      overflow: auto;
    }

  </style>
</head>

<body>
  <p>示例弹出层：<a href="javascript:void(0)"
      onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a>
  </p>
  <div id="light" class="white_content">这是一个层窗口示例程序.
    <a href="javascript:void(0)"
      onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a>
  </div>
  <div id="fade" class="black_overlay"></div>
</body>

<script>

  
//步骤一:创建异步对象
const ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','http://localhost/timeOutProp');
//步骤三:发送请求
ajax.send();
//超时2s设置，如果两秒没有返回结果，请求取消
// ajax.timeout=10000;
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}
  
}

ajax.onerror = function(e) {
  console.log(e);
}
</script>

</html>
